(function (window) {
	let todoList = JSON.parse(localStorage.getItem('todoList')) || []
	let vm = new Vue({
		el: '.todoapp',
		data: {
			content: '',
			todoList: todoList,
			unfinished: 2,
			isall: true,
			isactive: false,
			isconplated: false
		},
		methods: {
			del(id) {
				let that = this.todoList.find(item => item.id == id)
				if (!that.isComplated) this.unfinished -= 1
				this.todoList = this.todoList.filter((item) => id != item.id)
			},
			add() {
				this.todoList.unshift({ id: +new Date, content: this.content, isEdit: false, isComplated: false, isShow: { display: 'block' } })
				this.content = ''
				this.unfinished += 1
			},
			showEdit(id) {
				let that = this.todoList.find(item => item.id == id)
				that.isEdit = true
			},
			closeEdit(id) {
				console.log('ok');
				let that = this.todoList.find(item => item.id == id)
				that.isEdit = false
			},
			all() {
				this.isall = true
				this.isactive = false
				this.isconplated = false
				this.todoList.map(item => item.isShow.display = 'block')
			},
			active() {
				this.isall = false
				this.isactive = true
				this.isconplated = false
				this.todoList.map(item => {
					item.isShow.display = 'block'
					if (!item.isComplated) {
						return item.isShow.display = 'none'
					}
				})
			},
			conplated() {
				this.isall = false
				this.isactive = false
				this.isconplated = true
				this.todoList.map(item => {
					item.isShow.display = 'block'
					if (item.isComplated) {
						return item.isShow.display = 'none'
					}
				})
			},
			clearComplate() {
				this.todoList = this.todoList.filter(item => !item.isComplated)
			},
			check(id) {
				let that = this.todoList.find(item => item.id == id)
				if (that.isComplated) {
					this.unfinished += 1
				} else {
					this.unfinished -= 1
				}
			}
		},
		watch: {
			todoList: {
				deep: true,
				immediate: true,
				handler(value) {
					localStorage.setItem('todoList', JSON.stringify(this.todoList))
				}
			}
		},
		computed: {
			allChecked: {
				get() {
					return this.todoList.every(item => item.isComplated == true)
				},
				set(value) {
					this.todoList.map(item => item.isComplated = value)
				}
			}
		}
	})
})(window);
